<template>
  <div>
    <div class="table">
      <div class="table-tr">
          <div class="table-td">
              <div class="sub-table">
                  <div class="sub-table-tr">
                      <div class="table-th" :style="{width:widths[hindex]}" v-for="(h,hindex) in headers" :key="h">{{h}}</div>
                  </div>
              </div>
          </div>
      </div>
      <div class="table-tr" v-for="(item,sindex) in tableData" :key="sindex + item">
          <div class="table-td">
              <div class="sub-table">
                  <div class="sub-table-tr">
                    <div class="sub-table-td" :style="{width:widths[cindex]}" v-for="(cell,cindex) in item" :key="cindex + cell">
                      <div class="sub-table" v-if="cell&&cell.length">
                        <div class="sub-table-tr" v-for="(sem,mindex) in cell" :key="sem+mindex">
                          <div class="sub-table-td">
                            <etag v-if="type&&type[cindex]==1" :num="sem"/>
                            <div v-else-if="type&&type[cindex]==2">
                              <rich-text :nodes="sem"></rich-text>
                            </div>
                            <div v-else-if="type&&type[cindex]==3">
                              <color :num="mindex+1" :text="sem"/>
                            </div>
                            <div v-else>{{sem}}</div>
                          </div>
                        </div>
                      </div>
                      <div v-else>
                        <etag v-if="type&&type[cindex]==1" :num="cell"/>
                        <div v-else-if="type&&type[cindex]==2">
                            <rich-text :nodes="sem"></rich-text>
                        </div>
                        <div v-else-if="type&&type[cindex]==3">
                          <color :num="cindex+1" :text="sem"/>
                        </div>
                        <div v-else>{{cell}}</div>
                      </div>
                    </div>
                  </div>
              </div>
          </div>
      </div>
    </div><!-- end table -->
  </div><!-- end root -->
</template>

<script>
import {transTblParam} from '@/util'
import etag from '@/components/Etag'
import color from '@/components/Color'
export default {
  data () {
    return {
      // headers: [1, 2, 3],
      // data: [[4, [32, 12], 6], [32, 1, 32]]
      tableData: []
    }
  },
  components: {
    etag,
    color
  },
  props: [
    'headers',
    'widths',
    'data',
    'type' // 类型1为有效标签  2为html输出
  ],
  methods: {

  },
  mounted () {
    this.tableData = this.data
    transTblParam(this.tableData)
  },
  watch: {
    data: function (newQuestion, oldQuestion) {
      this.tableData = this.data
      transTblParam(this.tableData)
    }
  }
}
</script>
<style>

</style>
